<template>
    <view class="jk-page-container bg">
        <jkSearchBar
            :search-val.sync="searchParams.nameOrCode"
            :searchLeftItemName="workshopList.find(x => x.workshopId === searchParams.workshopId) ? workshopList.find(x => x.workshopId === searchParams.workshopId).workshopName : ''"
            :searchRightItemName="groupList.find(x => x.id === searchParams.groupId) ? groupList.find(x => x.id === searchParams.groupId).name : ''"
            placeholder="人员编号或名称"
            searchRightItemNoDataName="班组"
            @search="onSearchBtn"
            @search-left-item="onClickWorkshop"
            @search-right-item="onClickGroup"
        ></jkSearchBar>
        <view class="column-list-container">
            <view v-for="(item) in tableData" :key="item.id" class="column-list-item">
                <view class="column-list-item-default flex-between-center">
                    <view class="column-list-item-title">{{ item.name }}</view>
                    <view class="column-list-item-sub-title">
                    </view>
                </view>
                <view class="column-list-item-default column-list-item-sub-title">岗位：{{ item.postName }}</view>
                <view class="column-list-item-default column-list-item-sub-title">班组：{{ item.groupName || '无' }}</view>
                <view style="font-weight: 300;">
                    <u-button :disabled="empIds.includes(item.id)" @click="onToOpenBtn(item)" type="text" size="normal">选择</u-button>
                </view>
            </view>
            <jk-no-more :pageNo="searchParams.pageNo" :show="isNoMore" />
        </view>
        <jk-popup :show="showSelectGroupPopup" :closeOnClickOverlay="true" title="选择班组" @close="onSelectGroupPopup">
            <u-radio-group v-model="selectGroupVal" size="21" iconPlacement="right" placement="column" :borderBottom="true">
                <view style="max-height: 400px;overflow: auto;">
                    <u-radio
                        v-for="item in groupList"
                        :key="item.id"
                        labelSize="18"
                        iconSize="24"
                        size="24"
                        labelColor="#17233d"
                        :borderBottom="true"
                        :customStyle="{
                            margin: '8rpx',
                            height: '42px'
                        }"
                        :label="item.name"
                        :name="item.id"
                        style="margin: 10rpx;"
                    ></u-radio>
                </view>
                <u-button @click="onConfirmSelectGroupBtn" type="primary" size="large">确认</u-button>
            </u-radio-group>
        </jk-popup>
    </view>
</template>

<script>
    import {
        personnelGroupPage,
        systemAuthGetPermissionInfo,
        workforcemanagementEmpMachinePage,
        workforcemanagementScheduleGroupUpdate,
    } from "../../../api";
    import {
        isLastPage,
        pageConfig,
        showLoading, tipBar
    } from "../../../utils/jk-utils";
    import loadingMore from '../../../mixins/loading-more';
    import jkNoMore from "../../../jk-components/jk-no-more";
    import jkSearchBar from "../../../jk-components/jk-search-bar";
    import openStateBar from "../../production/openMachine/open-state-bar";
    import jkPopup from "../../../jk-components/jk-popup";
    export default {
        mixins: [loadingMore],
        components: {
            jkPopup,
            jkNoMore,
            jkSearchBar,
            openStateBar
        },
        data() {
            return {
                apiConfig: {
                    list: workforcemanagementEmpMachinePage
                },
                selectGroupVal: null,
                showSelectGroupPopup: false,
                searchParams: {
                    pageNo: 1,
                    pageSize: pageConfig.pageSize,
                    totalCount: pageConfig.totalCount,
                    onJob: true,
                    selectItem: true,
                    status: 5,
                    workshopId: null,
                    nameOrCode: '',
                },
                groupList: [],
                empIds: [],
                tableData: [],
                workshopList: [],
            }
        },
        onLoad(e) {
            this.empIds = e.empIds.split(',').map(x => Number(x));
            this.$set(this.searchParams, 'workshopId', Number(e.workshopId));
            this.scheduleId = e.scheduleId;
            this.scheduleGroupId = e.scheduleGroupId;
        },
        onShow() {
            this.getDependentData();
        },
        methods: {
            onConfirmSelectGroupBtn() {
                this.$set(this.searchParams, 'groupId', Number(this.selectGroupVal) === -1 ? '' : this.selectGroupVal);
                this.showSelectGroupPopup = false;
                this.getListRequest();
            },
            onSelectGroupPopup() {
                this.selectGroupVal = null;
                this.showSelectGroupPopup = false;
            },
            onClickGroup() {
                this.showSelectGroupPopup = true;
            },
            onClearOfSearchIpt() {
                this.$set(this.searchParams, 'nameOrCode', '');
                this.onSearchBtn();
            },
            onToOpenBtn(item) {
                let _this = this;
                uni.showModal({
                    title: '提示',
                    icon: 'error',
                    content: `确定添加"${item.name}"吗?`,
                    success(res) {
                        if (res.confirm) {
                            _this.saveRequest(item);
                        }
                    }
                });

            },
            saveRequest(item) {
                let params = {
                    scheduleId: this.scheduleId,
                    scheduleGroupId: this.scheduleGroupId,
                    scheduleEmpList: [{
                        empId: item.id,
                        empCode: item.code,
                        empName: item.name,
                        scheduleEmpPostList: [{
                            postId: item.postId,
                            postCode: item.postCode,
                            postName: item.postName,
                            scheduleEmpMachineList: item.empMachineList ? item.empMachineList.map(x => {
                                return {
                                    machineId: x.machineId,
                                    machineCode: x.machineCode,
                                    machineName: x.machineName,
                                };
                            }) : []

                        }]
                    }],
                };
                workforcemanagementScheduleGroupUpdate(params).then(res => {
                    if (res.data.status === 200) {
                        tipBar('save');
                        uni.navigateBack({
                            delta: 1
                        });
                        /*uni.navigateTo({
                            url: `/pages/production/empBindMachineBatch/index`
                        })*/
                    }
                });
            },
            onSearchBtn(e) {
                this.tableData = [];
                this.$set(this.searchParams, 'nameOrCode', e);
                this.getListRequest();
            },
            getWorkshopDataRequest() {
                return systemAuthGetPermissionInfo().then(res => {
                    if (res.data.status === 200) {
                        if (!this.searchParams.workshopId) {
                            // this.$set(this.searchParams, 'workshopId', res.data.res.workshop.defaultWorkshopId);
                        }
                        this.workshopList = getApp().globalData.defaultWorkshop.list;
                    }
                })
            },
            getGroupListRequest() {
                return personnelGroupPage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        this.groupList = res.data.res;
                        this.groupList.push({
                            id: -1,
                            code: 'all',
                            name: '全部'
                        })
                    }
                });
            },
            async getDependentData() {
                showLoading(true);
                this.searchParams.pageNo = 1;
                await this.getWorkshopDataRequest();
                await this.getGroupListRequest();
                if (this.searchParams.workshopId) await this.getListRequest();
                showLoading(false);
            },
            getListRequest() {
                if (this.searchParams.workshopId) {
                    showLoading(true);
                    this.searchParams.pageNo = 1;
                    return this.apiConfig.list(this.searchParams).then(res => {
                        showLoading(false);
                        if (res.data.status === 200) {
                            this.$set(this.searchParams, 'totalCount', res.data.count);
                            this.tableData = res.data.res;
                            this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
                        }
                    })
                }
            },
            onClickWorkshop() {
                /*let _this = this;
                uni.showActionSheet({
                    itemList: _this.workshopList.map(x => x.workshopName),
                    success(res) {
                        _this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
                        _this.getListRequest();
                    }
                });*/
            }
        },
        onReachBottom() {
            this.getMore();
        }
    }
</script>

<style lang="scss" scoped>
</style>
